<!--
   弹出层 html、css、js 封装在此同一个模板文件中，模块化管理
 -->

### isAdd 为 true 表示创建账户，为 false 表示修改账户
#set(isAdd = (account == null))

<!-- 弹出层 title -->
<div class="layui-layer-title" style="cursor: move;">
	#(isAdd ? '创建账户' : '修改账户')
</div>

<!-- 弹出层主体内容 -->
<div class="open-box">
	<form id="open-form" action="/admin/account/#(isAdd ? 'save' : 'update')" onsubmit="return false;">
		
		#if( ! isAdd )
			<input type="hidden" name="account.id" value="#(account.id)">
		#end
		
		### 参考 bootstrap 文档：垂直排列表单
		<div class="row">
			<label class="col-2 col-form-label">昵称</label>
			<div class="col-10">
				<input class="form-control" name="account.nickName" value="#(account.nickName??)" type="text" autocomplete="off">
			</div>
		</div>
		
		<div class="row">
			<label class="col-2 col-form-label">账号</label>
			<div class="col-10">
				<input class="form-control" name="account.userName" value="#(account.userName??)" type="text" autocomplete="off">
			</div>
		</div>
		
		<div class="row">
			<label class="col-2 col-form-label">密码</label>
			<div class="col-10">
				<input class="form-control" name="account.password" type="password" #if(!isAdd) placeholder="留空不修改密码" #end>
			</div>
		</div>
		
	</form>
</div>

<!-- 弹出层 button -->
<div class="layui-layer-btn">
	<a class="layui-layer-btn0" onclick="submitAccount();">确定</a>
	<a class="layui-layer-btn1">取消</a>
</div>

<!-- 弹出层样式 -->
<style>
	/*
	  弹出层的宽度 width 需要在绑定弹出事件的组件上通过 open 配置，
	  例如：open="{area:'365px', offset:'139px'}"
	       上例中的 area 配置宽度为 365px，y 轴的 top 位为 139px
	*/
	.open-box {
		padding: 20px 30px 0 35px;
	}
	.row {
		margin-bottom: 15px;
	}
	.col-2 {
		padding-left: 10px;
		padding-right: 0;
	}
	.col-10 {
		padding-left: 0;
	}
	.layui-layer-btn {
		padding: 0 25px 20px;
	}
</style>

<!-- 弹出层 js 脚本 -->
<script>
	$(function() {
		$('#open-form input:first').focus();
	});
	
	function submitAccount() {
		$form = $('#open-form');
		kit.post($form.attr('action'), $form.serialize(), function(ret) {
			if (ret.state == 'ok') {
				layer.closeAll();
				kit.fill('/admin/account', null, '#content-box');
			}
			kit.msg(ret);
		});
	}
</script>



